<template>
    <div>
        <el-row>
            <el-col :span="6" align="left">
                <span>用户ID：</span>
                <el-input placeholder="请输入用户ID" v-model="customerId" clearable></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>客户姓名：</span>
                <el-input placeholder="请输入姓名" v-model="customerName" clearable style="width:50%;"></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>联系电话：</span>
                <el-input placeholder="请输入联系电话" v-model="telPhone" clearable></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>时间范围：</span>
                <el-date-picker style="width:70%;"
                    v-model="time"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4" align="right">
                <el-button type="success" icon="el-icon-download" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出数据</el-button>
            </el-col>
        </el-row> 
        <el-main>
            <div>
            <el-table
                :data="table"
                v-loading="tableLoading"
                border
                stripe 
                size="small"
                height="500"
                style="width: 100%">
                <el-table-column
                    label="客户ID"
                    prop="customerId"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                    label="客户姓名"
                    prop="customerName"
                    align="center"
                    width="150">
                </el-table-column> 
                <el-table-column
                    label="积分"
                    prop="integralCN"
                    align="center"
                    width="120">
                </el-table-column> 
                <el-table-column
                    label="内容"
                    prop="content"
                    align="center"
                    :show-overflow-tooltip="true"
                    width="200">
                </el-table-column>  
                <el-table-column
                    label="手机"
                    prop="phoneNumber"
                    align="center"
                    width="150">
                </el-table-column>  
                <el-table-column
                    label="创建时间"
                    prop="createdTime"
                    align="center"
                    width="200">
                </el-table-column>  
                <el-table-column
                    label="更新时间"
                    prop="updatedTime"
                    align="center"
                    width="200">
                </el-table-column>  
            </el-table>
            <el-pagination
                background
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="currentChange"
                layout="prev, pager, next"
                :total="totalCount"
                style="margin:50px;">
            </el-pagination>
            <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
            </div>
        </el-main>
    </div>
</template>

<script>
var startTime="";
var endTime="";
var searchInfo={
    customerId:"",
    customerName:"",
    telPhone:"",
    startTime:"",
    endTime:"",
};
export default {
    data(){
        return{
            exportLoading:false,
            customerId:"",
            customerName:"",
            telPhone:"",
            time:"",
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            if(this.time){
                startTime=this.time[0];
                endTime=this.time[1];
            }else{
                startTime="";
                endTime="";
            }
            this.tableLoading=true;
            this.postRequest("/api/background/integral_record/integral_record_mg", {
                customerId:this.customerId,
                customerName:this.customerName, 
                phoneNumber:this.telPhone,
                startTime:startTime,
                endTime:endTime,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        customerId:this.customerId,
                        customerName:this.customerName,
                        telPhone:this.telPhone,
                        startTime:startTime,
                        endTime:endTime,
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        exports(){
            this.exportLoading=true;
            var address=`/api/background/integral_record/integral_record_export?customerId=${searchInfo.customerId}&&customerName=${searchInfo.customerName}&&phoneNumber=${searchInfo.telPhone}&&startTime=${searchInfo.startTime}&&endTime=${searchInfo.endTime}`
            this.common.downloadFile(address);
            setTimeout(()=>{
                this.exportLoading=false;
            },2000) 
        },
        // edit(item){
        //     console.log(item)
        // },
        // deleted(item){
        //     this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning"
        //     })
        //     .then(() => {
        //     this.tableLoading=true;
        //     this.deleteRequest("/api/background/integral_record/delete_integral_record?recordId="+item.recordId).then(resp => {
        //         this.tableLoading=false;
        //         if (resp && resp.data.status == 200) {
        //             this.common.showToast("success", resp.data.msg);
        //             this.initData();
        //         }
        //     });
        //     })
        //     .catch(() => {});
        // }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.el-main{
    min-width: 800px;
    display: flex;
    justify-content:center;
}
</style>
